<template>
  <div class="search-page">
    <!-- 顶部搜索栏 -->
    <div class="search-bar-wrap">
      <van-search
        v-model="keyword"
        placeholder="减脂食品"
        show-action
        @input="onSearch"
        @clear="onClear"
        shape="round"
        background="#fff"
      >
        <template #action>
          <span @click="onClear" style="color:#7c5dfa;">取消</span>
        </template>
      </van-search>
    </div>

    <!-- 食物食谱 -->
    <div class="section-title">
      食物食谱
      <span class="more" @click="showAll('recipe')">查看更多</span>
    </div>
    <div v-if="filteredRecipes.length > 0" class="recipe-list">
      <div
        class="recipe-card"
        v-for="item in filteredRecipes"
        :key="item.name"
        @click="goToRecipeDetail(item)"
      >
        <img :src="item.img" class="recipe-img" />
        <div class="recipe-info">
          <div class="recipe-name">{{ item.name }}</div>
          <div class="recipe-meta">
            <span>{{ item.time }}分钟</span>
            <span class="dot"></span>
            <span>{{ item.kcal }}大卡</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-result">
      <van-icon name="search" class="no-result-icon" />
      <div class="no-result-text">该食谱暂无记载，请等待膳小搭继续完善</div>
    </div>

    <!-- 浏览餐食 -->
    <div class="section-title">
      浏览餐食
      <span class="more" @click="showAll('food')">查看更多</span>
    </div>
    <div v-if="filteredFoods.length > 0" class="food-list">
      <div class="food-item" v-for="item in filteredFoods" :key="item.name">
        <img :src="item.img" class="food-icon" />
        <div class="food-info">
          <div class="food-name">{{ item.name }}</div>
          <div class="food-meta">
            <span>{{ item.kcal }}大卡</span>
            <span class="dot"></span>
            <span>{{ item.gram }}克</span>
          </div>
        </div>
        <van-icon 
          :name="starStatus[item.name] ? 'star' : 'plus'" 
          :class="['add-btn', { 'starred': starStatus[item.name] }]"
          @click="toggleStar(item)"
        />
      </div>
    </div>
    <div v-else class="no-result">
      <van-icon name="search" class="no-result-icon" />
      <div class="no-result-text">该餐食暂无记载，请等待膳小搭继续完善</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import { db, STORES } from '../utils/db'

const router = useRouter()
const starStatus = ref({}) // 用于存储收藏状态

// 示例数据
const recipes = [
  {
    name: '煎牛排',
    img: '/images/熟牛排.jpg',
    time: 15,
    kcal: 450,
    instructions:'牛排解冻至室温，吸干水分，撒盐、黑胡椒。平底锅大火烧热，倒油，放入牛排，每面煎1-3分钟（视厚度和熟度），侧面封边。转小火加黄油、蒜、迷迭香，融油淋肉。出锅静置5分钟锁汁，切片即可。关键：锅要高温焦化表面，静置保留肉汁，熟度依厚度调整。',
    videoUrl:'https://www.bilibili.com/video/BV1vN411z7Bi?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '鱼香肉丝',
    img: '/images/鱼香肉丝.jpg',
    time: 20,
    kcal: 320,
    instructions:'里脊肉切丝，用料酒、淀粉腌制。木耳、笋、青椒切丝备用。调鱼香汁（生抽、醋、糖、淀粉、水）。热油炒肉丝至变色盛出。爆香姜蒜末、豆瓣酱，加配菜翻炒，倒入肉丝和鱼香汁，炒匀收汁即可。关键：肉丝嫩滑靠腌制，鱼香汁比例要准（酸甜微辣），大火快炒保口感。',
    videoUrl:'https://www.bilibili.com/video/BV1QV4y1y7tx?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '提拉米苏',
    img: '/images/提拉米苏.jpg',
    time: 30,
    kcal: 420,
    instructions:'蛋黄加糖打发，拌入马斯卡彭奶酪。蛋白打发后混合成奶酪糊。浓缩咖啡加糖，手指饼干快速蘸咖啡后铺底，涂奶酪糊，重复一层。冷藏4小时，撒可可粉即成。关键：奶酪糊需轻盈，咖啡不可过湿，冷藏定型。',
    videoUrl:'https://www.bilibili.com/video/BV1es4y1C79S?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '火鸡面',
    img: '/images/火鸡面.jpg',
    time: 12,
    kcal: 450,
    instructions:'面条煮熟沥干，加入辣酱包（依口味调整量）、海苔芝麻料包拌匀。可配煎蛋、芝士或蔬菜解辣。关键：辣酱分次加防过辣，面条煮至Q弹，快速拌匀防粘。',
    videoUrl:'https://www.bilibili.com/video/BV1Qc94YvEeH?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '酿青椒',
    img: '/images/酿青椒.jpg',
    time: 25,
    kcal: 280,
    instructions:'青椒去籽切段；肉末加葱姜、盐、生抽、淀粉拌匀；将肉馅塞入青椒；热油煎至虎皮状，加生抽、糖、水焖煮5分钟，收汁即可。关键：选厚皮青椒防破，肉馅摔打上劲，煎制时先封口定型。',
    videoUrl:'https://www.bilibili.com/video/BV1j54y1J7BJ?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '蓝莓蛋糕',
    img: '/images/草莓蛋糕.jpg',
    time: 40,
    kcal: 380,
    instructions:'低粉、泡打粉混合，加糖、蛋、酸奶、油搅匀，拌入蓝莓。面糊倒入模具，表面再放几颗蓝莓，180℃烤30分钟。关键：轻柔翻拌防蓝莓破裂，烤前轻震去气泡，牙签插入不粘即熟。',
    videoUrl:'https://www.bilibili.com/video/BV1FX4y1p7Ag?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '莓果酸奶法式吐司',
    img: '/images/莓果酸奶法式吐司.jpg',
    time: 20,
    kcal: 350,
    instructions:'厚吐司浸蛋奶液（鸡蛋+牛奶+糖），黄油煎至两面金黄。搭配酸奶、草莓/蓝莓，淋蜂蜜或枫糖。关键：吐司吸饱蛋液，小火慢煎外脆内软，莓果新鲜解腻。',
    videoUrl:'https://www.bilibili.com/video/BV1yP411y77W?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '蔬菜沙拉',
    img: '/images/蔬菜沙拉.jpg',
    time: 10,
    kcal: 120,
    instructions:'生菜、黄瓜、番茄等洗净切块，按喜好搭配。淋橄榄油、柠檬汁（或沙拉酱），撒盐、黑胡椒拌匀。关键：蔬菜沥干防出水，现拌现吃保脆爽，酱料少量多次调口味。',
    videoUrl:'https://www.bilibili.com/video/BV1cd4y1N7w4?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '扒黄鱼',
    img: '/images/扒黄鱼.jpg',
    time: 25,
    kcal: 280,
    instructions:'黄鱼去鳞洗净，两面划刀，用盐、料酒腌制。热油煎至两面金黄，加入姜葱爆香，倒入适量水，加生抽、糖调味，大火收汁即可。关键：煎制时火候要适中，保持鱼肉完整。',
    videoUrl:'https://www.bilibili.com/video/BV1kq9AYXEY2?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '百乐熏鸡',
    img: '/images/百乐熏鸡.jpg',
    time: 35,
    kcal: 320,
    instructions:'整鸡洗净，用盐、料酒、姜葱腌制。锅中放糖、茶叶、香料，小火熏制至鸡皮金黄。关键：熏制时火候要小，保持烟熏味均匀。',
    videoUrl:'https://www.bilibili.com/video/BV1gV4y1y7Hi?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '爆炒肝尖',
    img: '/images/爆炒肝尖.jpg',
    time: 15,
    kcal: 280,
    instructions:'猪肝切片，用料酒、淀粉腌制。热油爆香姜蒜，大火快炒肝片至变色，加入青椒、洋葱等配菜，加盐、生抽调味即可。关键：大火快炒保持肝片嫩滑。',
    videoUrl:'https://www.bilibili.com/video/BV1Fg411A7zC?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '爆鱿鱼',
    img: '/images/爆鱿鱼.jpg',
    time: 15,
    kcal: 180,
    instructions:'鱿鱼切花刀，焯水后沥干。热油爆香姜蒜，加入鱿鱼快速翻炒，加盐、生抽、料酒调味，最后撒葱花即可。关键：焯水时间要短，保持鱿鱼脆嫩。',
    videoUrl:'https://www.bilibili.com/video/BV1F3411k7TP?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '北京炸酱面',
    img: '/images/北京炸酱面.jpg',
    time: 20,
    kcal: 450,
    instructions:'面条煮熟过凉水。肉末炒至变色，加入甜面酱、豆瓣酱炒香，加适量水熬制酱汁。面条装盘，浇上炸酱，配黄瓜丝、豆芽等即可。关键：酱汁要熬制浓稠，面条要筋道。',
    videoUrl:'https://www.bilibili.com/video/BV1DRL3zuELz?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '叉烧肉',
    img: '/images/叉烧肉.jpg',
    time: 40,
    kcal: 380,
    instructions:'五花肉切条，用叉烧酱、料酒、糖腌制。烤箱预热，将肉条放入烤制，期间刷蜂蜜水。关键：腌制时间要够，烤制时注意火候。',
    videoUrl:'https://www.bilibili.com/video/BV1MDx6eHE5Q?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '葱爆羊肉',
    img: '/images/葱爆羊肉.jpg',
    time: 20,
    kcal: 380,
    instructions:'羊肉切片，用料酒、淀粉腌制。热油爆香葱段，加入羊肉快速翻炒，加盐、生抽调味。关键：大火快炒保持羊肉嫩滑，葱要爆香。',
    videoUrl:'https://www.bilibili.com/video/BV11XJEztEPU?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '东坡肉',
    img: '/images/东坡肉.jpg',
    time: 60,
    kcal: 580,
    instructions:'五花肉切块，焯水后煎至金黄。加入料酒、生抽、老抽、冰糖，小火慢炖至肉烂。关键：炖制时间要够，保持肉质酥烂。',
    videoUrl:'https://www.bilibili.com/video/BV1L2421L7Wk?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '剁椒皮皮虾',
    img: '/images/剁椒皮皮虾.jpg',
    time: 15,
    kcal: 320,
    instructions:'皮皮虾洗净沥干。热油爆香姜蒜，加入剁椒炒香，放入皮皮虾快速翻炒。加料酒、生抽调味，撒葱花即可。关键：大火快炒保持虾肉鲜嫩，剁椒要炒出香味。',
    videoUrl:'https://www.bilibili.com/video/BV1t8yoYdEYt?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '粉丝包菜',
    img: '/images/粉丝包菜.jpg',
    time: 15,
    kcal: 180,
    instructions:'粉丝泡发，包菜切丝。热油爆香蒜末，加入包菜翻炒至软，放入粉丝，加盐、生抽调味。关键：粉丝泡发时间要适中，包菜要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV125411u7eX?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '干炒牛河',
    img: '/images/干炒牛河.jpg',
    time: 15,
    kcal: 420,
    instructions:'河粉泡发，牛肉切片腌制。热油爆香蒜末，加入牛肉快速翻炒至变色，放入河粉，加生抽、老抽调味。关键：大火快炒保持河粉筋道，牛肉要嫩滑。',
    videoUrl:'https://www.bilibili.com/video/BV1HpA8enEMZ?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '干锅土豆片',
    img: '/images/干锅土豆片.jpg',
    time: 6,
    kcal: 120,
    instructions:'土豆切片，青椒切块。热油爆香干辣椒、花椒，加入土豆片翻炒至金黄，放入青椒，加盐、生抽调味。关键：土豆片要切薄，炒至外酥里嫩。',
    videoUrl:'https://www.bilibili.com/video/BV13d5XzdEYT?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '宫保鸡丁',
    img: '/images/宫保鸡丁.jpg',
    time: 13,
    kcal: 420,
    instructions:'鸡胸肉切丁，用料酒、淀粉腌制。花生米炸熟。热油爆香干辣椒、花椒，加入鸡丁翻炒至变色，放入黄瓜丁、胡萝卜丁，加盐、糖、醋调味，最后加入花生米。关键：鸡丁要嫩滑，花生米要酥脆。',
    videoUrl:'https://www.bilibili.com/video/BV1qJ41197yF?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '汉堡',
    img: '/images/汉堡.jpg',
    time: 4,
    kcal: 620,
    instructions:'牛肉饼煎至两面金黄，面包片烤至微焦。依次放入生菜、番茄片、牛肉饼、芝士片、洋葱圈，淋上酱料。关键：牛肉饼要煎至七分熟，面包要烤至外酥里软。',
    videoUrl:'https://www.bilibili.com/video/BV1bFKWeXE1Q?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '桂林米粉',
    img: '/images/桂林米粉.jpg',
    time: 6,
    kcal: 120,
    instructions:'米粉泡发，配菜切丝。热油爆香蒜末，加入配菜翻炒，放入米粉，加盐、生抽调味。关键：米粉泡发时间要适中，配菜要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV1Jb411q7Cs?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '蚝油牛肉',
    img: '/images/蚝油牛肉.jpg',
    time: 9,
    kcal: 400,
    instructions:'牛肉切片，用料酒、淀粉腌制。热油爆香蒜末，加入牛肉快速翻炒至变色，放入青椒，加蚝油、生抽调味。关键：大火快炒保持牛肉嫩滑，蚝油要炒出香味。',
    videoUrl:'https://www.bilibili.com/video/BV1L94y157Tt?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '红烧茄子',
    img: '/images/红烧茄子.jpg',
    time: 9,
    kcal: 150,
    instructions:'茄子切块，用盐腌制。热油爆香蒜末，加入茄子翻炒至软，加生抽、老抽、糖调味，收汁即可。关键：茄子要炒至软烂，调味要适中。',
    videoUrl:'https://www.bilibili.com/video/BV1Ed4y1R7bF?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '红烧肉',
    img: '/images/红烧肉.jpg',
    time: 40,
    kcal: 510,
    instructions:'五花肉切块，焯水后煎至金黄。加入料酒、生抽、老抽、冰糖，小火慢炖至肉烂。关键：炖制时间要够，保持肉质酥烂。',
    videoUrl:'https://www.bilibili.com/video/BV1MM4y127Z3?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '红烧狮子头',
    img: '/images/红烧狮子头.jpg',
    time: 20,
    kcal: 462,
    instructions:'猪肉馅加葱姜、盐、料酒、淀粉拌匀，摔打上劲。热油煎至两面金黄，加入料酒、生抽、老抽、冰糖，小火慢炖至肉烂。关键：肉馅要摔打上劲，炖制时间要够。',
    videoUrl:'https://www.bilibili.com/video/BV1hp4y1T7dU?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '胡萝卜玉米炒黄瓜',
    img: '/images/胡萝卜玉米炒黄瓜.jpg',
    time: 6,
    kcal: 60,
    instructions:'胡萝卜、黄瓜切丁，玉米粒洗净。热油爆香蒜末，加入胡萝卜翻炒至软，放入黄瓜、玉米粒，加盐调味。关键：胡萝卜要炒至断生，黄瓜要保持脆嫩。',
    videoUrl:'https://www.bilibili.com/video/BV1Mb411L75q?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '回锅肉',
    img: '/images/回锅肉.jpg',
    time: 15,
    kcal: 610,
    instructions:'五花肉煮熟切片，青椒切块。热油爆香蒜末，加入肉片翻炒至出油，放入青椒，加豆瓣酱、生抽调味。关键：肉片要炒至出油，青椒要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV14Qt8eZEdh?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '黄焖鸡',
    img: '/images/黄焖鸡.jpg',
    time: 23,
    kcal: 320,
    instructions:'鸡肉切块，用料酒、淀粉腌制。热油爆香姜蒜，加入鸡肉翻炒至变色，放入土豆、胡萝卜，加生抽、老抽、冰糖，小火慢炖至肉烂。关键：炖制时间要够，保持肉质酥烂。',
    videoUrl:'https://www.bilibili.com/video/BV1hf4y1C7XU?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '椒盐排骨',
    img: '/images/椒盐排骨.jpg',
    time: 18,
    kcal: 275,
    instructions:'排骨切块，用料酒、淀粉腌制。热油爆香蒜末，加入排骨翻炒至金黄，撒上椒盐。关键：排骨要炒至外酥里嫩，椒盐要均匀。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '芥兰炒羊肉',
    img: '/images/芥兰炒羊肉.jpg',
    time: 14,
    kcal: 230,
    instructions:'羊肉切片，用料酒、淀粉腌制。芥兰切段。热油爆香蒜末，加入羊肉快速翻炒至变色，放入芥兰，加盐、生抽调味。关键：大火快炒保持羊肉嫩滑，芥兰要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV14c411T7Bi?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '烤全羊',
    img: '/images/烤全羊.jpg',
    time: 120,
    kcal: 3800,
    instructions:'整羊洗净，用盐、料酒、香料腌制。烤箱预热，将羊放入烤制，期间刷油。关键：腌制时间要够，烤制时注意火候。',
    videoUrl:'https://www.bilibili.com/video/BV1xE421K7kd?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '可乐鸡翅',
    img: '/images/可乐鸡翅.jpg',
    time: 19,
    kcal: 380,
    instructions:'鸡翅洗净，用料酒、淀粉腌制。热油爆香姜蒜，加入鸡翅翻炒至变色，倒入可乐，加生抽、老抽调味，小火慢炖至收汁。关键：炖制时间要够，保持肉质酥烂。',
    videoUrl:'https://www.bilibili.com/video/BV1Ch411w7GK?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '口水鸡',
    img: '/images/口水鸡.jpg',
    time: 8,
    kcal: 190,
    instructions:'鸡肉煮熟切块，配菜切丝。调口水汁（生抽、醋、糖、辣椒油、芝麻酱）。鸡肉装盘，淋上口水汁，撒上花生碎、葱花。关键：鸡肉要嫩滑，口水汁要调匀。',
    videoUrl:'https://www.bilibili.com/video/BV1jx411p7P7?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '莲藕肉饼',
    img: '/images/莲藕肉饼.jpg',
    time: 20,
    kcal: 278,
    instructions:'莲藕切碎，猪肉馅加葱姜、盐、料酒、淀粉拌匀，加入莲藕碎。热油煎至两面金黄，加生抽、老抽调味。关键：肉馅要摔打上劲，莲藕要切碎。',
    videoUrl:'https://www.bilibili.com/video/BV1314y1Y7Kh?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '凉拌瓜条',
    img: '/images/凉拌瓜条.jpg',
    time: 5,
    kcal: 30,
    instructions:'黄瓜切条，用盐腌制10分钟，挤干水分。调凉拌汁（生抽、醋、糖、辣椒油）。黄瓜装盘，淋上凉拌汁，撒上葱花。关键：黄瓜要腌制去水，凉拌汁要调匀。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '凉拌土豆丝',
    img: '/images/凉拌土豆丝.jpg',
    time: 5,
    kcal: 35,
    instructions:'土豆切丝，用盐腌制10分钟，挤干水分。调凉拌汁（生抽、醋、糖、辣椒油）。土豆丝装盘，淋上凉拌汁，撒上葱花。关键：土豆丝要腌制去水，凉拌汁要调匀。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '麻婆豆腐',
    img: '/images/麻婆豆腐.jpg',
    time: 12,
    kcal: 180,
    instructions:'豆腐切块，猪肉末用料酒、淀粉腌制。热油爆香蒜末，加入肉末翻炒至变色，放入豆腐，加豆瓣酱、生抽调味，勾芡。关键：豆腐要嫩滑，肉末要炒至变色。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '毛血旺',
    img: '/images/毛血旺.jpg',
    time: 20,
    kcal: 380,
    instructions:'各种食材切块，用料酒、淀粉腌制。热油爆香蒜末，加入食材翻炒至变色，放入毛血旺料，加生抽调味。关键：食材要炒至断生，毛血旺料要炒匀。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '梅菜扣肉',
    img: '/images/梅菜扣肉.jpg',
    time: 25,
    kcal: 580,
    instructions:'五花肉煮熟切片，梅菜切碎。热油爆香蒜末，加入肉片翻炒至出油，放入梅菜，加生抽、老抽调味，小火慢炖至肉烂。关键：肉片要炒至出油，梅菜要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '小龙虾',
    img: '/images/小龙虾jpg.jpg',
    time: 25,
    kcal: 380,
    instructions:'小龙虾洗净，用料酒、淀粉腌制。热油爆香姜蒜，加入小龙虾翻炒至变色，加豆瓣酱、生抽调味。关键：小龙虾要炒至变色，调味要适中。',
    videoUrl:'https://www.bilibili.com/video/BV1RMDZYnE5P?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '羊肉泡馍',
    img: '/images/羊肉泡馍.jpg',
    time: 15,
    kcal: 546,
    instructions:'羊肉切块，用料酒、淀粉腌制。热油爆香姜蒜，加入羊肉翻炒至变色，加生抽、老抽调味，小火慢炖至收汁。关键：炖制时间要够，保持羊肉酥烂。',
    videoUrl:'https://www.bilibili.com/video/BV1qU4y1N7G7?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '意大利面',
    img: '/images/意大利面.jpg',
    time: 12,
    kcal: 436,
    instructions:'意大利面煮熟，配菜切丝。热油爆香蒜末，加入配菜翻炒，放入意大利面，加盐、黑胡椒调味。关键：意大利面要煮至筋道，配菜要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV1rb411K7fx?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '油焖大虾',
    img: '/images/油焖大虾.jpg',
    time: 8,
    kcal: 426,
    instructions:'大虾洗净，用料酒、淀粉腌制。热油爆香姜蒜，加入大虾翻炒至变色，加生抽、老抽调味，小火慢炖至收汁。关键：大虾要炒至变色，调味要适中。',
    videoUrl:'https://www.bilibili.com/video/BV1wV411z717?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  },{
    name: '鱼圆豆腐汤',
    img: '/images/鱼圆豆腐汤.jpg',
    time: 15,
    kcal: 216,
    instructions:'鱼圆、豆腐切块，配菜切丝。热油爆香姜蒜，加入鱼圆翻炒至变色，放入豆腐、配菜，加盐、生抽调味，勾芡。关键：鱼圆要炒至变色，豆腐要嫩滑。',
    videoUrl:'https://www.bilibili.com/video/BV1cd4y1N7w4?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '云南过桥米线',
    img: '/images/云南过桥米线.jpg',
    time: 7,
    kcal: 322,
    instructions:'米线泡发，配菜切丝。热油爆香蒜末，加入配菜翻炒，放入米线，加盐、生抽调味。关键：米线要泡发，配菜要炒至断生。',
    videoUrl:'https://www.bilibili.com/video/BV1cd4y1N7w4?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '芋头蒸肉',
    img: '/images/芋头蒸肉.jpg',
    time: 11,
    kcal: 224,
    instructions:'芋头切块，猪肉切块，用料酒、淀粉腌制。热油爆香姜蒜，加入猪肉翻炒至变色，放入芋头，加生抽、老抽调味，小火慢炖至收汁。关键：炖制时间要够，保持肉质酥烂。',
    videoUrl:'https://www.bilibili.com/video/BV1cd4y1N7w4?vd_source=0ffeabfea161033ccf94f8536affcfcc'
  },{
    name: '重庆火锅',
    img: '/images/重庆火锅.jpg',
    time: 45,
    kcal: 846,
    instructions:'牛油底料炒香，加高汤/清水烧沸；毛肚、黄喉、肉片等食材涮煮，蘸香油+蒜泥+小米辣，麻辣鲜香超地道',
    videoUrl:'https://www.bilibili.com/video/BV1Pw411N7CQ?vd_source=f4caccbae98a04f139c51bebb6e0dd5d'
  }
]

const foods = [
  {
    name: '牛油果',
    img: '/images/牛油果.jpg',
    kcal: 160,
    gram: 100
  },
  {
    name: '香蕉',
    img: '/images/香蕉.jpg',
    kcal: 225,
    gram: 100
  },
  {
    name: '牛肉',
    img: '/images/牛排.jpg',
    kcal: 250,
    gram: 100
  },
  {
    name: '草莓',
    img: '/images/草莓.jpg',
    kcal: 230,
    gram: 80
  },
  {
    name: '西红柿',
    img: '/images/西红柿.jpg',
    kcal: 90,
    gram: 45
  },
  {
    name: '纯牛奶',
    img: '/images/纯牛奶.jpg',
    kcal: 150,
    gram: 90
  },
  {
    name: '西瓜',
    img: '/images/西瓜.jpg',
    kcal: 200,
    gram: 90
  },
  {
    name: '酸奶',
    img: '/images/希腊酸奶.jpg',
    kcal: 110,
    gram: 90
  },
  {
    name: '苹果',
    img: '/images/苹果.jpg',
    kcal: 30,
    gram: 90
  },
  {
    name: '梨',
    img: '/images/梨.jpg',
    kcal: 45,
    gram: 25
  },
  {
    name: '蛋挞',
    img: '/images/蛋挞.jpg',
    kcal: 125,
    gram: 40
  },
  {
    name: '芒果',
    img: '/images/芒果.jpg',
    kcal: 65,
    gram: 45
  },
  {
    name: '西兰花',
    img: '/images/broccoli.jpg',
    kcal: 30,
    gram: 90
  },
  {
    name: '橙子',
    img: '/images/orange.jpg',
    kcal: 65,
    gram: 40
  },
  {
    name: '土豆',
    img: '/images/蒸土豆.jpg',
    kcal: 75,
    gram: 60
  },
  {
    name: '紫薯',
    img: '/images/蒸紫薯.jpg',
    kcal: 65,
    gram: 60
  },
  {
    name: '汤圆',
    img: '/images/汤圆.jpg',
    kcal: 125,
    gram: 80
  }
]

const keyword = ref('')
const onSearch = () => {}
const onClear = () => {
  keyword.value = ''
}

const filteredRecipes = computed(() =>
  recipes.filter(item =>
    item.name.includes(keyword.value)
  )
)
const filteredFoods = computed(() =>
  foods.filter(item =>
    item.name.includes(keyword.value)
  )
)

const showAll = (type) => {
  showToast('敬请期待')
}

const isStarred = async (item) => {
  const userEmail = localStorage.getItem('userEmail')
  if (!userEmail) return false
  
  try {
    const user = await db.get(STORES.USER_LIST, userEmail)
    if (!user || !user.starList) return false
    
    return user.starList.some(starredItem => starredItem.name === item.name)
  } catch (error) {
    console.error('获取收藏状态失败:', error)
    return false
  }
}

const toggleStar = async (item) => {
  if (!localStorage.getItem('isLogin')) {
    showToast('请先登录')
    router.push('/login')
    return
  }

  try {
    const userEmail = localStorage.getItem('userEmail')
    if (!userEmail) {
      showToast('请先登录')
      router.push('/login')
      return
    }

    const user = await db.get(STORES.USER_LIST, userEmail)
    if (!user) {
      showToast('用户信息不存在')
      return
    }
    
    if (!user.starList) {
      user.starList = []
    }
    
    const starIndex = user.starList.findIndex(
      starredItem => starredItem.name === item.name
    )
    
    if (starIndex === -1) {
      user.starList.push(item)
      showToast('收藏成功')
    } else {
      user.starList.splice(starIndex, 1)
      showToast('取消收藏')
    }
    
    await db.put(STORES.USER_LIST, user)
    // 强制更新视图
    starStatus.value = { ...starStatus.value, [item.name]: !starStatus.value[item.name] }
  } catch (error) {
    console.error('收藏操作失败:', error)
    showToast('操作失败，请重试')
  }
}

// 添加跳转到食谱详情页的方法
const goToRecipeDetail = async (recipe) => {
  try {
    // 将食谱数据存储到 IndexedDB
    await db.put(STORES.RECIPES, recipe)
    router.push(`/recipe-detail/${recipe.name}`)
  } catch (error) {
    console.error('保存食谱失败:', error)
    showToast('操作失败，请重试')
  }
}

// 初始化收藏状态
onMounted(async () => {
  const userEmail = localStorage.getItem('userEmail')
  if (userEmail) {
    try {
      const user = await db.get(STORES.USER_LIST, userEmail)
      if (user && user.starList) {
        const status = {}
        user.starList.forEach(item => {
          status[item.name] = true
        })
        starStatus.value = status
      }
    } catch (error) {
      console.error('初始化收藏状态失败:', error)
    }
  }
})
</script>

<style scoped>
.search-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e9eafc 0%, #e6e6fa 100%);
}
.search-bar-wrap {
  padding: 12px 0 0 0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 18px 16px 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.more {
  font-size: 13px;
  color: #7c5dfa;
  cursor: pointer;
}
.recipe-list {
  display: flex;
  overflow-x: auto;
  padding: 0 0 8px 16px;
  gap: 12px;
}
.recipe-card {
  min-width: 140px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px #e0e0e0;
  margin-right: 8px;
  padding: 0 0 8px 0;
  flex-shrink: 0;
}
.recipe-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
}
.recipe-info {
  padding: 8px 10px 0 10px;
}
.recipe-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}
.recipe-meta {
  font-size: 12px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #aaa;
  border-radius: 50%;
  margin: 0 4px;
}
.food-list {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px #e0e0e0;
  padding: 10px 0;
  margin: 0 16px;
}
.food-item {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.food-item:last-child {
  border-bottom: none;
}
.food-icon {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  border-radius: 8px;
  object-fit: cover;
}
.food-info {
  flex: 1;
}
.food-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}
.food-meta {
  font-size: 12px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 4px;
}
.add-btn {
  font-size: 22px;
  color: #7c5dfa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-btn.starred {
  color: #ffd700;
  transform: scale(1.1);
}

.no-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #fff;
  border-radius: 14px;
  margin: 0 16px;
  box-shadow: 0 2px 8px #e0e0e0;
}

.no-result-icon {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 12px;
}

.no-result-text {
  font-size: 14px;
  color: #999;
  text-align: center;
  line-height: 1.5;
}
</style>